<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="robots" content="index, follow"/>
    <title>{ms:channel type="parent"}${field.typetitle}{/ms:channel}</title>
    <meta name="keywords" content="${field.typekeyword}">
    <meta name="description" content="${field.typedescrip}">
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <meta name="applicable-device" content="pc,mobile"/>
    <link href="/{ms:global.style/}css/style.css" rel="stylesheet"/>
    <link href="/{ms:global.style/}css/css.css" rel="stylesheet"/>
    <script src="/{ms:global.style/}js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/{ms:global.style/}js/jquery.superslide.2.1.1.js">//pc导航</script>
    <script src="/{ms:global.style/}js/anim.js">//动画</script>
    <script type="text/javascript" src="/{ms:global.style/}js/basic.js"></script>
    <!--引入vue库-->
    <script type="text/javascript" src="/static/plugins/vue/2.6.9/vue.min.js"></script>
    <!--引入element-ui库-->
    <script src="${base}/static/plugins/element-ui/2.15.8/index.min.js"></script>
    <link rel="stylesheet" href="/static/plugins/element-ui/2.15.8/theme-chalk/index.min.css">
    <!--网络请求框架-->
    <script src="/static/plugins/axios/0.18.0/axios.min.js"></script>
    <script src="/static/plugins/qs/6.6.0/qs.min.js"></script>
    <script src="/static/plugins/ms/2.0/ms.umd.js"></script>
    <script src="/static/plugins/ms/2.0/ms-el-form.umd.js"></script>
</head>
<body>
<#include "header.htm" />
<div class="o_big">
    {ms:channel type="parent"}
   <img src="{@ms:file field.typelitpic/}" alt="CMS,免费CMS,免费开源Java CMS,CMS系统,Java CMS,CMS内容管理系统,企业CMS,HTML网页模板,CMS模板,CMS源码,网站源码,信创系统软件,安可系统,网站建设,模板网站,建站模板,建站工具,建站平台,建站工具"/>
   <h1>${field.typetitle}</h1>
    {/ms:channel}
</div>
<!--正文begin-->
<!--文章内容开始-->
<div class="right fr">

    <!-- 留言表单 -->
    <div id="form" v-loading="loading" v-cloak>
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right" size="small"
                 class="message">
            <!--称呼姓名-->
            <el-form-item label="称呼姓名" prop="leaveName">
                <el-input
                        v-model="form.leaveName"
                        :disabled="false"
                        :readonly="false"
                        :style="{width:  '100%'}"
                        :clearable="true"
                        placeholder="请输入称呼姓名">
                </el-input>
            </el-form-item>
            <!--联系电话-->
            <el-form-item label="联系电话" prop="leavePhone">
                <el-input
                        v-model="form.leavePhone"
                        :disabled="false"
                        :readonly="false"
                        :style="{width:  '100%'}"
                        :clearable="true"
                        placeholder="请输入联系电话">
                </el-input>
            </el-form-item>
            <!--留言-->
            <el-form-item label="留言" prop="content">
                <el-input
                        type="textarea" :rows="5"
                        :disabled="false"
                        :readonly="form.id>0?true:false"
                        v-model="form.content"
                        :style="{width: '100%'}"
                        placeholder="请输入留言">
                </el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="rand_code">
                <el-row>
                    <el-col :span="10">
                        <el-input v-model="form.rand_code"
                                  :disabled="false" :readonly="false" :clearable="true"
                                  placeholder="请输入验证码">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <img height="40px" :src="verifCode" @click="code" style="margin-left: 10px"/>
                    </el-col>
                </el-row>
            </el-form-item>
            <!--验证码-->

            <el-form-item label="  ">
                <el-button @click="save" type="primary" :loading="loading" style="width: 200px">
                    {{loading?'提交留言中':'提交留言'}}
                </el-button>
            </el-form-item>
        </el-form>
        </el-form>
    </div>
    <!--正文end-->
    <#include "footer.htm" />
    <script language="javascript" src="/{ms:global.style/}js/foot.js"></script>
</body>
<script>
    var form = new Vue({
        el: '#form',
        data: function () {
            return {
                verifCode: "/code.do" + new Date().getTime(),
                loading: false,
                saveDisabled: false,
                //表单数据
                form: {
                    // 称呼姓名
                    leaveName: '',
                    // 联系电话
                    leavePhone: '',
                    // 留言
                    content: '',
                    // 验证码
                    rand_code: '',
                },
                rules: {
                    // 称呼姓名
                    leaveName: [{"required": true, "message": "称呼姓名不能为空"}, {
                        "min": 0,
                        "max": 255,
                        "message": "称呼姓名长度必须为0-255"
                    }],
                    // 联系电话
                    leavePhone: [{
                        "required": true,
                        "message": "联系电话不能为空"
                    }, {
                        "pattern": /^([0-9]{3,4}-)?[0-9]{7,8}$|^\d{3,4}-\d{3,4}-\d{3,4}$|^1[0-9]{10}$/,
                        "message": "联系电话格式不匹配"
                    }, {"min": 0, "max": 255, "message": "联系电话长度必须为0-255"}],
                    // 留言
                    content: [{"required": true, "message": "留言不能为空"}],
                    // 验证码
                    rand_code: [{"required": true, "message": "验证码不能为空"}],
                },
            }
        },
        watch: {},
        components: {},
        computed: {},
        methods: {
            code: function () {
                this.verifCode = "/code.do?t=" + new Date().getTime();
            },
            save: function (e) {
                e.preventDefault();//阻止默认事件跳转
                var that = this;
                that.$refs.form.validate(function (valid) {
                    if (valid) {
                        that.form.modelName = "留言板"; //modelName需要填写自己的模型昵称
                        ms.http.post("/mdiy/form/data/save.do", that.form).then(function (res) {
                            if (res.result) {
                                that.$notify({
                                    title: '成功',
                                    type: 'success',
                                    message: '感谢您的参与!'
                                });
                                that.$refs.form.resetFields(); //清空表单
                            } else {
                                if (res.msg == '验证码错误!') {
                                    that.$notify({
                                        title: '失败',
                                        message: res.msg,
                                        type: 'warning'
                                    });
                                } else {
                                    that.$alert('需要安装留言插件才能使用，请先进入后台MStore安装留言插件使用。推荐开发者分享的<a href="http://store.mingsoft.net/#/detail?id=310&type=plugin" target="_blank" style="color:#409EFF ">留言插件</a>', '留言插件提示', {
                                        dangerouslyUseHTMLString: true
                                    });
                                }
                            }
                            that.code();
                        })
                    }
                })

            }
        }
    });

</script>
</html>
<style>
    .message {
        width: 40%;
        margin: 20px auto;
    }
</style>